<template>
	<view class="page-content">
		<u-navbar title="注册" :autoBack="true" :bgColor="them_color" :titleStyle="{color:'#ffffff'}"
			leftIconColor="#ffffff"></u-navbar>
		<view class="content" :style="'margin-top:' + navH + 'px;'">
			<view class="item">
				<view class="item-input-box">
					<u--input type="number" prefixIcon="phone" v-model="mobile" placeholder="请输入手机号码" border="none"
						prefixIconStyle="font-size: 22px;color: #909399;border-right:1px solid #C2C2C2;padding-left:10px;padding-right:10px;margin-right:10px;"
						maxlength="11" />
					<view @click="acquire()" style="color: #666666;font-size: 14px;padding-right: 20px;border-radius: 25px;
						background-color: #F6F6F8;padding: 5px 10px;align-self: center;margin-right: 5px;">
						{{again_sent ? time+'s再获取' : '发送验证码'}}
					</view>
				</view>
			</view>
			<!-- 验证码 -->
			<view class="item">
				<view class="item-input-box">
					<u--input type="number" prefixIcon="hourglass-half-fill" v-model="code" placeholder="请输入验证码"
						border="none"
						prefixIconStyle="font-size: 22px;color: #909399;border-right:1px solid #C2C2C2;padding-left:10px;padding-right:10px;margin-right:10px;"
						maxlength="11" />
				</view>
			</view>
			<!-- 新密码 -->
			<view class="item">
				<view class="item-input-box">
					<u--input type="text" prefixIcon="lock-fill" v-model="password" placeholder="请输入密码" border="none"
						prefixIconStyle="font-size: 22px;color: #909399;border-right:1px solid #C2C2C2;padding-left:10px;padding-right:10px;margin-right:10px;"
						maxlength="11" />
				</view>
			</view>
			<view class="bottom">
				<view class="btn" :class="{'btn-allow':isButton}" @click="registered()">
					注册
				</view>
			</view>
			<view style="width: 100%;padding: 20px;position: relative;">
				<view
					style="font-size: 16px;color: blue;width: 40px;position: absolute;right: 40px;text-align: center;text-decoration: underline;"
					@click="login">
					登陆
				</view>
			</view>
			<view class="protocol">
				<!-- <checkbox-group @change='ChangeIsDefault'>
					<checkbox :class="inAnimation?'trembling':''" @animationend='inAnimation=false'
						:checked="protocol ? true : false" />已阅读并同意 <text class="main-color"
						@click="privacy(4)">《用户协议》</text>
					与<text class="main-color" @click="privacy(3)">《隐私协议》</text>
				</checkbox-group> -->
				<u-checkbox-group @change='ChangeIsDefault'>
					<u-checkbox :checked="protocol ? true : false" shape="circle" :class="inAnimation?'trembling':''"
						@animationend='inAnimation=false'></u-checkbox>
					已阅读并同意 <text class="main-color" @click="privacy(4)">《用户协议》</text>
					<!-- 与<text class="main-color" @click="privacy(3)">《隐私协议》</text> -->
				</u-checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get_code,
		register,
		login,
		recommend
	} from '@/api/public.js'
	import {
		toLogin
	} from '@/libs/login';
	export default {
		data() {
			return {
				inAnimation: false,
				protocol: false,
				them_color: getApp().globalData.theme_color,
				mobile: '', //电话号码
				code: '', //验证码
				password: '', //密码
				again_sent: false,
				time: 180, //验证码倒计时
				isButton: false, //表单填完内容 高亮提交按钮
				navH: ''
			}
		},
		onLoad(options) {
			this.navH = getApp().globalData.navHeight / 2;
		},
		watch: {
			mobile(res) {
				this.isButton = !this.verifyData()
			},
			code(res) {
				this.isButton = !this.verifyData()
			},
			password(res) {
				this.isButton = !this.verifyData()
			},
		},
		methods: {
			ChangeIsDefault(e) {
				this.$set(this, 'protocol', !this.protocol);
				console.log(this.protocol)
			},
			privacy(type) {
				uni.navigateTo({
					url: "/pages/users/privacy/index?type=" + type
				})
			},
			login() {
				toLogin();
			},
			//校验表单内容，处理高亮提交按钮
			verifyData() {
				let formData = [this.mobile, this.code, this.password]
				return formData.some(val => !val.length)
			},


			// 获取验证码  							
			acquire() {
				//校验手机号是否正确，才执行获取验证码
				if (!uni.$u.test.mobile(this.mobile)) {
					uni.$u.toast('手机号格式不对')
					return false
				}
				if (this.again_sent) {
					return false
				}
				var _this = this;
				_this.time = 180;
				get_code({
					mobile: _this.mobile,
					type: 1
				}).then((res2) => {
					console.log(res2)

					_this.again_sent = true;
					var intervalID = setInterval(function() {
						--_this.time;
						if (_this.time <= 0) {
							clearInterval(intervalID);
							_this.again_sent = false;
						}
					}, 1000)
				})
			},

			//注册按钮操作
			registered() {
				var _this = this;
				if (!_this.protocol) {
					_this.inAnimation = true
					return _this.$util.Tips({
						title: '请先阅读并同意协议'
					});
				}
				if (!this.isButton) {
					uni.$u.toast('内容还没填完')
					return false
				}
				if (!uni.$u.test.mobile(this.mobile)) {
					uni.$u.toast('手机号格式不对')
					return false
				}

				register({
					mobile: _this.mobile,
					code: _this.code,
					password: _this.password,
				}).then((res) => {
					console.log(res)
					if (res.status == 0) {
						login({
							user_name: _this.mobile,
							password: _this.password
						}).then((res2) => {
							console.log(res2)
							if (res2.status == 1) {
								recommend({
									app_token: res2.data.app_token,
									parent_id: getApp().globalData.recommend_id || _this.$Cache.get('RECOMMEND_ID'),
									supplier_id: _this.globalData.supplier_id
								}).then(res => {
									console.log('注册 绑定推荐人', res.msg)
								})
								
								_this.$store.commit("LOGIN", {
									'app_token': res.data.app_token
								});
								_this.$store.commit("UPDATE_USERINFO", res.data)

								_this.$util.Tips({
									title: res2.msg,
									icon: 'success'
								}, {
									tab: 3
								});
							} else {
								uni.showToast({
									title: res2.msg,
									icon: 'none'
								})
							}
						})
					} else if (res.status != 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},

		}
	}
</script>


<style lang="scss" scoped>
	page {
		background-color: #FFFFFF !important;
	}

	.protocol {
		margin-top: 40rpx;
		color: #999999;
		font-size: 24rpx;
		bottom: 20rpx;

		/deep/ .u-checkbox-group {
			margin-left: 30px;
		}
	}

	.trembling {
		animation: shake 0.6s;
	}

	.page-content {
		height: 100vh;
		background-color: #FFFFFF;
		border-top: 1px solid #e2e2e2;

		.content {
			width: 100%;
			padding: 40rpx;

			.item {
				width: 100%;
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;

				&:first-child {
					margin-top: 60px;
				}

				.item-input-box {
					margin: 0 auto;
					width: 300px;
					border-radius: 40px;
					border: 1px solid #CDE6FA !important;
					height: 50px;
					display: flex;
				}

			}

			.bottom {
				width: 100%;
				height: 90upx;
				margin-top: 50upx;
				line-height: 90upx;

				.btn {
					border-radius: 40px;
					width: 300px;
					height: 80rpx;
					line-height: 80rpx;
					margin: 0 auto;
					background-color: #BDBDBD;
					color: #FFFFFF;
					text-align: center;
					font-size: 30rpx;

					&:after {
						border: none;
					}
				}

				.btn-allow {
					background-color: $theme-color;
				}
			}

		}
	}
</style>